<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>档案管理系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/static/dist/css/skins/all-skins.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-treeview.css">
    <link rel="stylesheet" href="/static/css/bootstrapValidator.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="/static/layer/theme/default/layer.css">
    <link rel="stylesheet" href="/static/webCss/yhgl.css?v=shujubuwqd12138">

    <style type="text/css">

    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/static/plugins/ie9/html5shiv.min.js"></script>
    <script src="/static/plugins/ie9/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition skin-blue"  style="font-size: medium">

<div class="content row" id="yhgl">

    <div class="modal" id="addUserModel" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加用户</h4>
                </div>
                <div class="modal-body">
                    <form role="form" id="userForm">
                        <div class="form-group">
                            <label>姓名</label>
                            <input type="text" class="form-control" name="name" v-model="newUser.name" >
                        </div>
                        <div class="form-group">
                            <label>所属部门</label>
                            <input type="text" class="form-control" name="dw" v-model="newUser.dw">
                        </div>
                        <div class="form-group">
                            <label>联系电话</label>
                            <input class="form-control" type="text" name="phone" v-model="newUser.phone">
                        </div>
                        <div class="form-group">
                            <label>权限角色</label>
                            <select class="form-control" name="roleId" v-model="newUser.roleId">
                                <option style="display: none"></option>
                                <option v-for="(v,k) in allRole" :value="v.id">{{v.name}}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>账户</label>
                            <input class="form-control" type="text" name="account" v-model="newUser.account">
                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            <input class="form-control" type="password" name="password" v-model="newUser.password">
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                    <button @click="addUser" type="button" class="btn btn-primary" style="background-color: #2C75E8">确认添加</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal" id="editUserModel" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">编辑用户</h4>
                </div>
                <div class="modal-body">
                    <form role="form" id="userbjForm">
                        <div class="form-group">
                            <label>姓名</label>
                            <input type="text" class="form-control" name="name" v-model="newUser.name" readonly>
                        </div>
                        <div class="form-group">
                            <label>所属部门</label>
                            <input type="text" class="form-control" name="dw" v-model="newUser.dw">
                        </div>
                        <div class="form-group">
                            <label>联系电话</label>
                            <input class="form-control" type="text" name="phone" v-model="newUser.phone">
                        </div>
                        <div class="form-group">
                            <label>权限角色</label>
                            <!--<input class="form-control" type="text" name="role" v-model="role" readonly>-->
                            <select class="form-control" name="roleId" v-model="newUser.roleId">
                                <option v-for="(v,k) in allRole" :value="v.id">{{v.name}}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>账户</label>
                            <input class="form-control" type="text" name="account" v-model="newUser.account">
                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            <input class="form-control" type="password" name="password" v-model="newUser.password">
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal" @click="closebj">关闭</button>
                    <button @click="editUser" type="button" class="btn btn-primary" style="background-color: #2C75E8">确认编辑</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <div class="modal" id="scModel" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">删除确认提醒</h4>
                </div>
                <div class="modal-body">
                    <h5>你确定要删除该用户吗？</h5>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal" @click="cancel">取消</button>
                    <button @click="sureSc" type="button" class="btn btn-primary" style="background-color: #2C75E8">确认删除</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div id="addtool" class="btn-group row">
        <div class="col-xs-2">
            <span class="input-group">
            <input v-model="keyword" type="text" class="form-control" placeholder="请输入关键字">
            <span @click="doSearch" class="input-group-addon btn  btn-primary" onkeydown="return isSearch(event)"><i class="fa fa-search"></i></span>
        </span>
        </div>
        <a class="btn btn-primary pull-right" aria-hidden="true"  data-toggle="modal" data-target="#addUserModel" title="添加用户" style="background-color: #2C75E8;margin-right: 1%">添加</a>
    </div>
    <div class=" col-xs-12">
        <div>
            <!--<div class="box-header">-->
                <!--<h3 class="box-title">用户管理</h3>-->
            <!--</div>-->
            <div class="box-body">
                <table class="table table-bordered table-hover text-center" id="userTable">

                </table>
            </div>
        </div>
    </div>
</div>

<script src="/static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<!-- Slimscroll -->
<script src="/static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/static/plugins/fastclick/fastclick.js"></script>

<!-- AdminLTE App -->
<script src="/static/dist/js/app.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/dist/js/demo.js"></script>
<!--tabs-->
<script src="/static/dist/js/app_iframe.js"></script>
<script src="/static/js/bootstrap-treeview.js"></script>
<script src="/static/js/bootstrapValidator.min.js"></script>
<script src="/static/js/bootstrap-table.min.js"></script>
<script src="/static/js/bootstrap-table-zh-CN.js"></script>
<script src="/static/js/vue.js"></script>
<script src="/static/js/vue-resource.min.js"></script>
<script src="/static/layer/layer.js"></script>
<script src="/static/js/myJs.js?v=shujubuwqd12138"></script>
<script src="/static/js/newJs.js?v=shujubuwqd12138"></script>

<script type="text/javascript">
    newCss("/static/webCss/yhgl.css");
    function paramsMatter(value,row,index) {
        var span=document.createElement('span');
        span.setAttribute('title',value);
        span.innerHTML = value;
        return span.outerHTML;
    }
    window.document.onkeydown = isSearch;
    function isSearch(event) {
        var keynum;
        var keychar;
        var numcheck;

        if(window.event) // IE
        {
            keynum = event.keyCode
        } else if(event.which) // Netscape/Firefox/Opera
        {
            keynum = event.which
        }
        if(keynum === 13){
            vue.doSearch();
        }
    }
    var aid;
    function bjUser(id) {
        $('#editUserModel').modal('show');
        var myMsg = cxLoad("编辑中");
        $.get('/updataQueryUser?id='+id).then( function (result) {
            var data = result.data.user;
            if(result.code == 200){
                layer.close(myMsg);
                vue.$data.newUser.id = data.id;
                vue.$data.newUser.name = data.name;
                vue.$data.newUser.dw = data.dw;
                vue.$data.newUser.phone = data.phone;
                vue.$data.newUser.roleId = data.roleId;
                vue.$data.newUser.account = data.account;
                vue.$data.newUser.password = data.password;
                vue.$data.role = roleId2RoleName(data.roleId);
            }
        })
    }
    function deleteUser(id){
        aid = id;
        $('#scModel').modal('show');
    }
    var vue = new Vue({
        el: '#yhgl',
        data: {
            role:null,
            keyword:null,
            allRole:null,
            newUser:{
                id:null,
                name:null,
                dw:null,
                phone:null,
                roleId:null,
                account:null,
                password:null,
            }
        },
        methods: {
            editUser:function(){
                var myMsg = cxLoad("修改中");
                this.$http.post('/updataUser',this.newUser,{emulateJSON:true}).then( function (result) {
                    var data = result.body;
                    if(data.code == 200){
                        layer.close(myMsg);
                        cxAlertOk("用户信息修改成功");
                        $("#userTable").bootstrapTable('destroy');
                        $('#userTable').bootstrapTable({
                            url: '/listUserPage',
                            contentType: "application/json; charset=UTF-8",
                            type: "GET",
                            dataType: 'json',
                            queryParamsType: "",
                            singleSelect: true,
                            paginationShowPageGo: true,
                            pageNumber:1,
                            pageSize:10,
                            queryParams: function (params) {
                                return {'pageNum':params.pageNumber,'pageSize':params.pageSize,'keyword':this.keyword};
                            },
                            striped: true,
                            smartDisplay:false,
                            cache: false,
                            pagination: true,
                            pageList: [5,10],
                            sidePagination: 'server',
                            toolbar: "#addtool",
                            columns: [{
                                field: 'name',
                                title: '姓名',
                                formatter:paramsMatter
                            }, {
                                field: 'dw',
                                title: '所属部门',
                                formatter:paramsMatter
                            }, {
                                field: 'phone',
                                title: '电话',
                                formatter:paramsMatter
                            }, {
                                field: 'account',
                                title: '账号',
                                formatter:paramsMatter
                            }, {
                                field: 'roleName',
                                title: '权限等级',
                                formatter:paramsMatter
                            },{
                                title: '操作',
                                formatter: function (value, row, index) {
                                    var aStr = '<a class="czBtn" href="javascript:deleteUser('+row.id+')">删除</a>';
                                    aStr += '<a class="czBtn" href="javascript:bjUser('+row.id+')">编辑</a>';
                                    return aStr;
                                }
                            }],
                            responseHandler: function (res) {  //后台返回的结果
                                if (res.code == "200") {
                                    var data = res.data.data;
                                    var NewData = [];
                                    for(i=0;i<data.length;i++){
                                        var dd = data[i];
                                        dd.roleName = roleId2RoleName(dd.roleId);
                                        NewData.push(dd);
                                    }
                                    var data = {
                                        total: res.data.total,
                                        rows: NewData
                                    };
                                    return data;
                                }
                            }
                        });
                        $('#editUserModel').modal('hide');
                    }else {
                        layer.close(myMsg);
                        cxAlert(data.mess);
                    }
                })
            },
            closebj:function(){
              $('#editUserModel').modal('hide');
            },
            //查询
            doSearch:function(){
                $("#userTable").bootstrapTable('destroy');
                $('#userTable').bootstrapTable({
                    url: '/listUserPage',
                    contentType: "application/json; charset=UTF-8",
                    type: "GET",
                    dataType: 'json',
                    queryParamsType: "",
                    singleSelect: true,
                    paginationShowPageGo: true,
                    pageNumber:1,
                    pageSize:10,
                    queryParams: function (params) {
                        return {'pageNum':params.pageNumber,'pageSize':params.pageSize,'keyword':vue.$data.keyword};
                    },
                    striped: true,
                    smartDisplay:false,
                    cache: false,
                    pagination: true,
                    pageList: [5,10],
                    sidePagination: 'server',
                    toolbar: "#addtool",
                    columns: [{
                        field: 'name',
                        title: '姓名',
                        formatter:paramsMatter
                    }, {
                        field: 'dw',
                        title: '所属部门',
                        formatter:paramsMatter
                    }, {
                        field: 'phone',
                        title: '电话',
                        formatter:paramsMatter
                    }, {
                        field: 'account',
                        title: '账号',
                        formatter:paramsMatter
                    }, {
                        field: 'roleName',
                        title: '权限等级',
                        formatter:paramsMatter
                    },{
                        title: '操作',
                        formatter: function (value, row, index) {
                            var aStr = '<a class="czBtn" href="javascript:deleteUser('+row.id+')">删除</a>';
                            aStr += '<a class="czBtn" href="javascript:bjUser('+row.id+')">编辑</a>';
                            return aStr;
                        }
                    }],
                    responseHandler: function (res) {  //后台返回的结果
                        if (res.code == "200") {
                            var data = res.data.data;
                            var NewData = [];
                            for(i=0;i<data.length;i++){
                                var dd = data[i];
                                dd.roleName = roleId2RoleName(dd.roleId);
                                NewData.push(dd);
                            }
                            var data = {
                                total: res.data.total,
                                rows: NewData
                            };
                            return data;
                        }
                    }
                });
            },
            //确认删除
            sureSc:function(){
                var myMsg = cxLoad("删除中");
                $.ajax({
                    url: '/deleteUser?id='+aid,
                    success: function(){
                        layer.close(myMsg);
                        cxAlertOk("删除成功")
                        $("#userTable").bootstrapTable('destroy');
                        $('#userTable').bootstrapTable({
                            url: '/listUserPage',
                            contentType: "application/json; charset=UTF-8",
                            type: "GET",
                            dataType: 'json',
                            queryParamsType: "",
                            singleSelect: true,
                            paginationShowPageGo: true,
                            pageNumber:1,
                            pageSize:10,
                            queryParams: function (params) {
                                return {'pageNum':params.pageNumber,'pageSize':params.pageSize,'keyword':vue.$data.keyword};
                            },
                            striped: true,
                            smartDisplay:false,
                            cache: false,
                            pagination: true,
                            pageList: [5,10],
                            sidePagination: 'server',
                            toolbar: "#addtool",
                            columns: [{
                                field: 'name',
                                title: '姓名',
                                formatter:paramsMatter
                            }, {
                                field: 'dw',
                                title: '所属部门',
                                formatter:paramsMatter
                            }, {
                                field: 'phone',
                                title: '电话',
                                formatter:paramsMatter
                            }, {
                                field: 'account',
                                title: '账号',
                                formatter:paramsMatter
                            }, {
                                field: 'roleName',
                                title: '权限等级',
                                formatter:paramsMatter
                            },{
                                title: '操作',
                                formatter: function (value, row, index) {
                                    var aStr = '<a class="czBtn" href="javascript:deleteUser('+row.id+')">删除</a>';
                                    aStr += '<a class="czBtn" href="javascript:bjUser('+row.id+')">编辑</a>';
                                    return aStr;
                                }
                            }],
                            responseHandler: function (res) {  //后台返回的结果
                                if (res.code == "200") {
                                    var data = res.data.data;
                                    var NewData = [];
                                    for(i=0;i<data.length;i++){
                                        var dd = data[i];
                                        dd.roleName = roleId2RoleName(dd.roleId);
                                        NewData.push(dd);
                                    }
                                    var data = {
                                        total: res.data.total,
                                        rows: NewData
                                    };
                                    return data;
                                }
                            }
                        });
                    }}
                );
                $('#scModel').modal('hide');
            },

            //取消
            cancel:function(){
                $('#scModel').modal('hide');
            },
            addUser: function () {
                var bootstrapValidator1 = $("#userForm").data('bootstrapValidator');
                bootstrapValidator1.validate();
                if(bootstrapValidator1.isValid()){
                    var myMsg = cxLoad("添加中");
                    this.$http.post('/addUser',this.newUser,{emulateJSON:true}).then( function (result) {
                        var data = result.body;
                        if(data.code == 200){
                            layer.close(myMsg);
                            cxAlertOk("添加成功");
                            $("#userForm").data('bootstrapValidator').resetForm();//清除当前验证的关键之处
                            $('#addUserModel').modal('hide');
                            $("#userTable").bootstrapTable('refresh');
                            this.newUser.name=null;
                            this.newUser.dw=null;
                            this.newUser.phone=null;
                            this.newUser.roleId=null;
                            this.newUser.account=null;
                            this.newUser.password=null;
                        }else{
                            layer.close(myMsg);
                            cxAlert(data.mess);
                        }
                    })
                }
            }
        },
        created: function () {

            this.$http.get('/getAllRole').then( function (result) {
                var data = result.body;
                if(data.code == 200){
                    this.allRole = data.data;
                }
            })
        },
        mounted: function () {
            var that = this;
            $("#userTable").bootstrapTable('destroy');
            $('#userTable').bootstrapTable({
                url: '/listUserPage',
                contentType: "application/json; charset=UTF-8",
                type: "GET",
                dataType: 'json',
                queryParamsType: "",
                singleSelect: true,
                paginationShowPageGo: true,
                pageNumber:1,
                pageSize:10,
                queryParams: function (params) {
                    return {'pageNum':params.pageNumber,'pageSize':params.pageSize,'keyword':that.keyword};
                },
                striped: true,
                smartDisplay:false,
                cache: false,
                pagination: true,
                pageList: [5,10],
                sidePagination: 'server',
                toolbar: "#addtool",
                columns: [{
                    field: 'name',
                    title: '姓名',
                    formatter:paramsMatter
                }, {
                    field: 'dw',
                    title: '所属部门',
                    formatter:paramsMatter
                }, {
                    field: 'phone',
                    title: '电话',
                    formatter:paramsMatter
                }, {
                    field: 'account',
                    title: '账号',
                    formatter:paramsMatter
                }, {
                    field: 'roleName',
                    title: '权限等级',
                    formatter:paramsMatter
                },{
                    title: '操作',
                    formatter: function (value, row, index) {
                        var aStr = '<a class="czBtn" href="javascript:deleteUser('+row.id+')">删除</a>';
                        aStr += '<a class="czBtn" href="javascript:bjUser('+row.id+')">编辑</a>';
                        return aStr;
                    }
                }],
                responseHandler: function (res) {  //后台返回的结果
                    if (res.code == "200") {
                        var data = res.data.data;
                        var NewData = [];
                        for(i=0;i<data.length;i++){
                            var dd = data[i];
                            dd.roleName = roleId2RoleName(dd.roleId);
                            NewData.push(dd);
                        }
                        var data = {
                            total: res.data.total,
                            rows: NewData
                        };
                        return data;
                    }
                }
            });

            $('#userForm').bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    name: {
                        validators: {
                            notEmpty: {
                                message: '姓名不能为空'
                            },
                            stringLength: {
                                max: 10,
                                message: '姓名字段长度不能超过10'
                            }
                        }
                    },
                    dw: {
                        validators: {
                            notEmpty: {
                                message: '所在单位不能为空'
                            },
                            stringLength: {
                                max: 30,
                                message: '单位字段长度不能超过30'
                            }
                        }
                    },
                    phone: {
                        validators: {
                            notEmpty: {
                                message: '联系方式不能为空'
                            },
                            stringLength: {
                                max: 20,
                                message: '联系方式字段长度不能超过20'
                            }
                        }
                    },
                    account: {
                        validators: {
                            notEmpty: {
                                message: '账户不能为空'
                            },
                            stringLength: {
                                max: 20,
                                message: '账户字段长度不能超过20'
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },
                            stringLength: {
                                max: 20,
                                message: '密码字段长度不能超过20'
                            }
                        }
                    },
                    roleId: {
                        validators: {
                            notEmpty: {
                                message: '权限角色不能为空'
                            },
                            stringLength: {
                                max: 11,
                                message: '权限角色字段长度不能超过11'
                            }
                        }
                    }
                }
            });
        }
    });


</script>

</body>
</html>
